<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        span {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: red;
            line-height: 100px;
            text-align: center;
            display: inline-block;
        }

        span:nth-child(7),
        span:nth-child(6) {
            background: blue;
        }
    </style>
</head>



<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>

<button id="start">摇一摇</button>
<button id="stop">停止</button>

<body>
    <script>
        // 获取dom元素
        var btn1 = document.querySelector("#start"),
            btn2 = document.querySelector("#stop"),
            spans = document.querySelectorAll("span"),
            arr = [],

            timer;



        // 添加事件
        btn1.onclick = function () {
            btn1.disabled = true
            timer = setInterval(function () {
                while (true) {
                    var sum = random(1, 32)
                    if (arr.indexOf(sum) === -1) {
                        arr.push(sum)
                    }
                    if (arr.length >= 7) {
                        break;
                    }
                }
                arr.forEach(function (item, index) {
                    spans[index].innerHTML = item
                })

                arr = []
            }, 1000)

        }
        btn2.onclick = function () {
            clearInterval(timer)
            btn1.disabled = false

        }
        function random(n, m) {
            return Math.floor(Math.random() * (m - n + 1) + n)
        }

    </script>

</body>

</html>